<!--报表 add by gaojingyu-->
<template>
  <section>
    <!--工具条-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true" :model="filters" @submit.native.prevent>
        <el-form-item
          label="所属项目:"
          label-width="83px"
          prop="getProjectFirstID"
        >
          <el-select
            clearable
            v-model="form.getProjectFirstID"
            placeholder="请选择项目列表"
            required
          >
            <el-option
              v-for="(item, index) in project"
              :key="index + ''"
              :label="item.project_name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="批次号" label-width="83px">
          <el-input
            clearable
            v-model="filters.interface_pici"
            prefix-icon="el-icon-search"
          ></el-input>
        </el-form-item>

        <el-form-item label="执行结果" label-width="83px">
          <el-select clearable v-model="form.result" placeholder="全部">
            <el-option label="成功" value="成功"></el-option>
            <el-option label="失败" value="失败"></el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <el-form :inline="true" :model="formUser" class="form_input">
        <el-form-item label="执行时间" label-width="83px">
          <!-- 把组件里默认的中国标准时间格式化为 年-月-日-->
          <el-date-picker
            clearable
            v-model="formUser.orderStart_Date"
            value-format="yyyy-MM-dd"
            type="date"
            placeholder="选择开始日期"
            :picker-options="orderStartDate"
            size="medium"
          >
          </el-date-picker>
          <span> - </span>
          <el-date-picker
            clearable
            v-model="formUser.orderEnd_Date"
            value-format="yyyy-MM-dd"
            type="date"
            placeholder="选择结束日期"
            :picker-options="orderEndDate"
            size="medium"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getRunResultList">查询</el-button>
        </el-form-item>
      </el-form>
    </el-col>

    <!--列表-->
    <el-table
      :data="result"
      highlight-current-row
      v-loading="listLoading"
      @selection-change="selsChange"
      style="width: 100%;"
    >
      <!-- <el-table-column type="selection" min-width="5%">
                </el-table-column> -->
      <el-table-column
        type="index"
        align="center"
        :index="indexMethod"
        label="序号"
      />

      <el-table-column prop="project_name" label="项目" min-width="12%">
      </el-table-column>
      <el-table-column prop="interface_pici" label="批次号" min-width="12%">
      </el-table-column>
      <el-table-column
        prop="interface_action_count"
        label="执行接口数"
        min-width="10%"
      >
        <template slot-scope="scope">
          <el-popover placement="top-start" width="600" trigger="hover">
            <p style="font-size:20px;color:#4C9FF8">
              批次号: {{ scope.row.interface_pici }}
            </p>
            <p style="font-size:15px;color:blue">
              执行接口名: {{ scope.row.interface_action_name }}
            </p>
            <p style="font-size:15px;color:green">
              成功接口名: {{ scope.row.interface_aciton_succcess_name }}
            </p>
            <p style="font-size:15px;color:red">
              失败接口名: {{ scope.row.interface_aciton_fail_name }}
            </p>
            <div slot="reference" class="name-wrapper">
              <el-tag size="small"
                >{{ scope.row.interface_action_count }}
              </el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>

      <el-table-column
        prop="interface_aciton_succcess_count"
        label="执行成功数"
        min-width="10%"
        @mouseover="showDetail"
      >
        <template slot-scope="scope">
          <el-popover placement="top-start" width="600" trigger="hover">
            <p style="font-size:20px;color:#4C9FF8">
              批次号: {{ scope.row.interface_pici }}
            </p>
            <p style="font-size:15px;color:blue">
              执行接口名: {{ scope.row.interface_action_name }}
            </p>
            <p style="font-size:15px;color:green">
              成功接口名: {{ scope.row.interface_aciton_succcess_name }}
            </p>
            <p style="font-size:15px;color:red">
              失败接口名: {{ scope.row.interface_aciton_fail_name }}
            </p>
            <div slot="reference" class="name-wrapper">
              <el-tag size="small"
                >{{ scope.row.interface_aciton_succcess_count }}
              </el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column
        prop="interface_aciton_fail_count"
        label="执行失败数"
        min-width="10%"
      >
        <template slot-scope="scope">
          <el-popover placement="top-start" width="600" trigger="hover">
            <p style="font-size:20px;color:#4C9FF8">
              批次号: {{ scope.row.interface_pici }}
            </p>
            <p style="font-size:15px;color:blue">
              执行接口名: {{ scope.row.interface_action_name }}
            </p>
            <p style="font-size:15px;color:green">
              成功接口名: {{ scope.row.interface_aciton_succcess_name }}
            </p>
            <p style="font-size:15px;color:red">
              失败接口名: {{ scope.row.interface_aciton_fail_name }}
            </p>
            <div slot="reference" class="name-wrapper">
              <el-tag size="small"
                >{{ scope.row.interface_aciton_fail_count }}
              </el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>

      <el-table-column prop="interface_res" label="执行结果" min-width="10%">
      </el-table-column>
      <el-table-column prop="case_type" label="用例分类" min-width="10%">
      </el-table-column>
      <el-table-column
        prop="create_time"
        label="执行时间"
        :show-overflow-tooltip="true"
        min-width="20%"
      >
      </el-table-column>

      <el-table-column label="操作" min-width="25%">
        <template slot-scope="scope">
          <!--跳转
                    <el-button plain size="small" type="info" @click="showDetail(scope.row)">执行详情</el-button>-->
          <!--弹窗-->
          <el-button
            plain
            size="small"
            type="primary"
            @click="handleResult(scope.$index, scope.row)"
            >结果详情
          </el-button>
          <!--
                    <router-link v-if="scope.row.status" :to="{ name: '项目概况', params: {project_id: scope.row.id}}" style="cursor:pointer;color: #0000FF;text-decoration:underline">
                        {{ scope.row.name }}
                    </router-link>


					<router-link :to="{ name: '新增接口', params: {project_id: this.$route.params.project_id}}" style='text-decoration: none;color: aliceblue;'>
						<el-button type="primary">新增</el-button>
					</router-link>-->
        </template>
      </el-table-column>
    </el-table>

    <div id="mouse" class="normal"></div>

    <el-col :span="24" class="toolbar">
      <el-pagination
        layout="prev, pager, next"
        @current-change="handleCurrentChange"
        :page-size="20"
        :page-count="total"
        style="float:right;"
      >
      </el-pagination>
    </el-col>
    <!--展示成功失败接口详情-->
    <el-dialog
      :visible.sync="addFormVisible"
      :close-on-click-modal="false"
      style="width: 75%; left: 12.5%"
    >
      <el-form
        :model="addForm"
        label-width="80px"
        :rules="addFormRules"
        ref="addForm"
      >
        <el-form-item label="接口执行情况" prop="env_name">
          <el-input
            v-model.trim="addForm.env_name"
            auto-complete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="addFormVisible = false">取消</el-button>
      </div>
    </el-dialog>
  </section>
</template>

<script type="text/javascript" src="${ctx}/static/common/js/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<script>
import { getProjectList, getRunResult } from "../../../../api/api";

export default {
  // components: {ElRow},
  data() {
    return {
      filters: {
        name: "",
      },

      // selectDatetime:'',
      // selectDatetime1:'',
      formUser: {
        orderStart_Date: "", // 下单开始时间
        orderEnd_Date: "", // 下单结束时间
      },
      orderStartDate: {
        disabledDate: (time) => {
          if (this.formUser.orderEnd_Date) {
            return (
              time.getTime() > new Date(this.formUser.orderEnd_Date).getTime()
            );
          }
        },
      },
      orderEndDate: {
        disabledDate: (time) => {
          if (this.formUser.orderStart_Date) {
            // 减掉86400000秒(一天)目的是把当前选中的下单日期包含在内可以选择，也就是说在选择结束日期时，可以选择当前下单日期
            //return time.getTime() < new Date(this.formUser.orderStart_Date).getTime() - 86400000;
            //
            return (
              time.getTime() <
              new Date(this.formUser.orderStart_Date).getTime() - 86400000
            );
          }
        },
      },

      form: {
        getProjectFirstID: "", //所属项目
        getApiFirstID: "", //接口名称
        getCaseTypeFirstID: "", //用例分类
        //getModelFirstID:'',
        case_name: "", //用例名称
        status: 0, //状态
        responseArea: [
          { key: "", exetiaojian: "_type2", zhengze: "", tiaojian: "" }, //, //依赖默认给1
        ],

        sqlArea: [
          { sql: "", zhengze: "" }, //依赖默认给1
        ],
        status: true,
        requestType: "POST",
        httpType: "HTTP",
        apiAddress: "",
        selectable: false,
        //默认check属性yilai=0  不要勾选 不存在依赖

        data: "",
      },
      addFormVisible: false,

      project: [],
      result: [],
      total: 0,
      page: 1,
      listLoading: false,
      sels: [], //列表选中列
      start_time: "",
      end_time: "",

      editFormVisible: false, //编辑界面是否显示
      editLoading: false,
      //options: [{ label: "Web", value: "Web"}, { label: "App", value: "App"}],

      editFormRules: {
        env_name: [
          { required: true, message: "请输入环境名称", trigger: "blur" },
          {
            min: 1,
            max: 50,
            message: "长度在 1 到 50 个字符",
            trigger: "blur",
          },
        ],

        address: [
          { required: true, message: "请输入地址", trigger: "blur" },
          {
            min: 1,
            max: 50,
            message: "长度在 1 到 50 个字符",
            trigger: "blur",
          },
        ],
        content: [
          { required: true, message: "请输入描述", trigger: "blur" },
          { max: 255, message: "不能超过125个字符", trigger: "blur" },
        ],
      },

      //编辑界面数据
      editForm: {
        name: "",
        version: "",
        type: "",
        description: "",
      },

      addFormVisible: false, //新增界面是否显示
      addLoading: false,
      addFormRules: {
        env_name: [
          { required: true, message: "请输入环境名称", trigger: "blur" },
          {
            min: 1,
            max: 50,
            message: "长度在 1 到 50 个字符",
            trigger: "blur",
          },
        ],

        address: [
          { required: true, message: "请输入地址", trigger: "blur" },
          {
            min: 1,
            max: 50,
            message: "长度在 1 到 50 个字符",
            trigger: "blur",
          },
        ],
        content: [
          { required: true, message: "请输入描述", trigger: "blur" },
          { max: 255, message: "不能超过125个字符", trigger: "blur" },
        ],
      },
      //新增界面数据
      addForm: {
        name: "",
        version: "",
        type: "",
        description: "",
      },

      data() {
        return {};
      },
    };
  },

  //     created() {
  //         this.initData({});
  //         this.initData1({});
  // },

  methods: {
    showDetail(row) {
      var total = row.interface_action_name;
      var success = row.interface_aciton_succcess_name;
      var fail = row.interface_aciton_fail_name;

      // 把写的提示信心需要换行的地方分成数组 confirmText
      const confirmText = [
        "运行接口为:" + total,
        "成功接口为:" + success,
        "失败接口为:" + fail,
      ];
      const newDatas = [];
      const h = this.$createElement;
      for (const i in confirmText) {
        newDatas.push(h("p", null, confirmText[i]));
      }
      this.$confirm("提示", {
        title: "执行详情如下",
        message: h("div", null, newDatas),
        showCancelButton: false,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "info",
      });
    },

    getRunResultList() {
      if (
        this.formUser.orderStart_Date == "" ||
        this.formUser.orderStart_Date == null
      ) {
        var start_time = "1970-01-01 0:0";
      } else {
        var start_time = this.formUser.orderStart_Date + " 0:0";
      }

      if (
        this.formUser.orderEnd_Date == "" ||
        this.formUser.orderEnd_Date == null
      ) {
        var end_time = "2099-12-31 23:59";
      } else {
        var end_time = this.formUser.orderEnd_Date + " 23:59";
      }

      //let params = { page: self.page,
      //  pici:  this.$route.params.pici,
      //  :self.filters.interface_name,
      this.listLoading = true;
      let self = this;

      let params = {
        page: self.page,
        start_time: start_time,
        end_time: end_time,

        pici: self.filters.interface_pici,
        getProjectFirstID: Number(self.form.getProjectFirstID),
        result: self.form.result,
      };

      let headers = {
        Authorization: "Token " + JSON.parse(sessionStorage.getItem("token")),
      };
      getRunResult(headers, params).then((res) => {
        self.listLoading = false;
        let { msg, code, data } = res;
        if (code === "999999") {
          self.total = data.total;
          self.result = data.data;
        } else {
          self.$message.error({
            message: msg,
            center: true,
          });
        }
      });
    },

    getRunResultListByPici() {
      //执行页面跳转用

      if (
        this.formUser.orderStart_Date == "" ||
        this.formUser.orderStart_Date == null
      ) {
        var start_time = "1970-01-01 0:0";
      } else {
        var start_time = this.formUser.orderStart_Date + " 0:0";
      }

      if (
        this.formUser.orderEnd_Date == "" ||
        this.formUser.orderEnd_Date == null
      ) {
        var end_time = "2099-12-31 23:59";
      } else {
        var end_time = this.formUser.orderEnd_Date + " 23:59";
      }

      this.listLoading = true;
      let self = this;

      let params = {
        page: self.page,

        pici: this.pici,

        start_time: start_time,
        end_time: end_time,

        getProjectFirstID: Number(self.form.getProjectFirstID),
        result: self.form.result,
      };

      let headers = {
        Authorization: "Token " + JSON.parse(sessionStorage.getItem("token")),
      };
      getRunResult(headers, params).then((res) => {
        self.listLoading = false;
        let { msg, code, data } = res;
        if (code === "999999") {
          self.total = data.total;
          self.result = data.data;
        } else {
          self.$message.error({
            message: msg,
            center: true,
          });
        }
      });
    },

    getProjects() {
      let self = this;
      let params = {
        project_id: this.$route.params.project_id,
      };
      let headers = {
        "Content-Type": "application/json",
        Authorization: "Token " + JSON.parse(sessionStorage.getItem("token")),
      };
      getProjectList(headers, params).then((_data) => {
        let { msg, code, data } = _data;
        if (code === "999999") {
          var projectjsonArr = new Array();

          for (var i = 0; i < data.length; i++) {
            if (data[i].status == 0) {
              projectjsonArr.push(data[i]);
            }
          }

          self.project = projectjsonArr;
        } else {
          self.$message.error({
            message: msg,
            center: true,
          });
        }
      });
    },

    handleCurrentChange(val) {
      this.page = val;
      this.getRunResultList();
    },
    indexMethod(index) {
      let curpage = this.page; //单前页码，具体看组件取值

      let limitpage = 20; //每页条数，具体是组件取值

      return index + 1 + (curpage - 1) * limitpage;
    },
    //跳转用
    handleResult: function(index, row) {
      let pici = row.interface_pici;

      this.$router.push({ path: "/report_detail/pici=" + pici });
    },
    beforeRouteLeave(to, from, next) {
      // 从列表页去到别的页面，如果不是详情页，则不缓存列表页
      if (to.name !== "stockInfo") {
        this.$route.meta.keepAlive = false;
      } else {
        this.$route.meta.keepAlive = true;
      }
      next();
    },
    //显示新增界面
    handleAdd: function() {
      this.addFormVisible = true;
    },
    selsChange: function(sels) {
      this.sels = sels;
    },
  },
  mounted() {
    this.getProjects();
    this.pici = this.$route.query.pici;
    self.pici = this.$route.query.pici;
    var pici = this.pici;
    getRunResult();

    this.getRunResultListByPici();
  },
};
</script>

<style></style>
